<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10-图书购物车</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
    }

    th {
      background-color: lightgray;
    }

    td, th {
      border: 1px solid grey;
      padding: 6px 30px;
    }

    table tr:first-child th:first-child {
      border-top-left-radius: 12px;
    }

    table tr:first-child th:last-child {
      border-top-right-radius: 12px;
    }

    table tr:last-child td:first-child {
      border-bottom-left-radius: 12px;
    }

    table tr:last-child td:last-child {
      border-bottom-right-radius: 12px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-if="booklist.length > 0">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book, index) in booklist">
            <td>{{index+1}}</td>
            <td>{{book.name}}</td>
            <td>{{book.publishDate}}</td>
            <td>{{book.price | bookprice}}</td>
            <td>
              <button @click="decrement(book)" v-bind:disabled="book.buyCount <= 1">-</button>
              {{book.buyCount}}
              <button @click="increment(book)">+</button>
            </td>
            <td>
              <button @click="removeClick(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价格：{{totoalPrice | bookprice}}</h2>
    </div>
    <div v-else>
      购物车为空
    </div>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        decrement(book) {
          book.buyCount--
        },
        increment(book) {
          book.buyCount++
        },
        removeClick(index) {
          this.booklist.splice(index, 1)
        }
      },
      computed: {
        totoalPrice() {
          // let totoalPrice = 0
          // for (const book of this.booklist) {
          //   totoalPrice += (book.price * book.buyCount)
          // }
          // return totoalPrice
          return this.booklist.reduce(function (preValue, book) {
            return preValue + book.price * book.buyCount
          }, 0)
        }
      },
      filters: {
        bookprice(price) {
          return "￥" + price.toFixed(2)
        }
      },
      data: {
        booklist: [
          { name: "算法导论", publishDate: "2006-08", price: 118.00, buyCount: 1 },
          { name: "编程珠玑", publishDate: "2016-12", price: 98.00, buyCount: 1 },
          { name: "Linux鸟哥私房菜", publishDate: "2020-01", price: 89.00, buyCount: 1 },
          { name: "代码大全", publishDate: "1999-05", price: 18.00, buyCount: 1 },
        ],
      }
    })
  </script>
</body>

</html>